<template>
  <InfoCard title="企业概况"
            style="height: 448px; margin-top: 19px">
    <div class="top-table">
      <div class="info">
        <div class="icon-industry"></div>
        <div class="chart"
             style="width: 679px; height: 200px">
          <div class="canvas"
               ref="chartRef"></div>
        </div>
      </div>
      <div class="info">
        <div class="icon-member"></div>
      </div>
    </div>
    <div class="bottom-circle">
      <!-- circle-item -->

      <div class="item1 item">
        <div class="circle1 circle">
          <span class="percent">23%</span>
        </div>
        <div class="circle-info">
          <span class="circle-title">应急发证企业</span>
          <div class="num-content">
            <span class="number">{{
              groupData?.companyInfoGroup?.certitiedFirm
            }}</span>
            <span class="orange-unit">个</span>
          </div>
        </div>
      </div>
      <div class="item2 item">
        <div class="circle2 circle">
          <span class="percent">25%</span>
        </div>
        <div class="circle-info">
          <span class="circle-title">港航发证企业</span>
          <div class="num-content">
            <span class="number">{{
              groupData?.companyInfoGroup?.uncertifiedFirm
            }}</span>
            <span class="orange-unit">个</span>
          </div>
        </div>
      </div>
      <div class="item3 item">
        <div class="circle3 circle">
          <span class="percent">25%</span>
        </div>
        <div class="circle-info">
          <span class="circle-title">其他企业</span>
          <div class="num-content">
            <span class="number">{{ groupData?.companyInfoGroup?.else }}</span>
            <span class="orange-unit">个</span>
          </div>
        </div>
      </div>
    </div>
  </InfoCard>
  <InfoCard title="两重点一重大"
            style="height: 380px; margin-top: 25px">
    <div class="civ">
      <div class="important">
        <div class="imp-item1 imp-item">
          <span class="text-info danger-info">重大危险源</span>
          <div class="number-content">
            <span class="number">{{
              groupData?.importantGroup?.extraDangerSource
            }}</span>

            <span class="unit">个</span>
          </div>
        </div>
        <div class="imp-item3 imp-item">
          <span class="text-info watch-info">重点监管化工工艺</span>
          <div class="number-content">
            <span class="number">{{
              groupData?.importantGroup?.chemistry
            }}</span>
            <span class="unit">个</span>
          </div>
        </div>
      </div>
      <div class="imp-item2 imp-item">
        <span class="text-info chemestry-info">重点监管危化品</span>
        <div class="number-content2">
          <span class="number">{{
            groupData?.importantGroup?.chemistryTechnoloy
          }}</span>
          <span class="unit">个</span>
        </div>
      </div>
      <div class="background"></div>
    </div>
  </InfoCard>
  <InfoCard title="第三方单位"
            style="height: 400px; margin-top: 34px">
    <div class="cookie">
      <div class="rose-canvas"
           ref="roseRef"></div>
    </div>
  </InfoCard>
</template>
<script setup>
import { inject } from 'vue'
import { useleftContent } from '../share'
const { chartRef, roseRef } = useleftContent()
const groupData = inject('groupData')
</script>
<style scoped lang="less">
.top-table {
  margin: 0 14px;
  height: 190px;

  .info {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 96px;

    .icon-industry {
      width: 86px;
      height: 96px;
      background: url(@/assets/images/industry_number.png) center no-repeat;
      background-size: cover;
    }

    .icon-member {
      width: 86px;
      height: 96px;
      background: url(@/assets/images/member_number.png) center no-repeat;
      background-size: cover;
    }

    .content {
      flex: 1;
    }

    .chart {
      position: relative;
      width: 685px;
      height: 190px;

      .canvas {
        position: absolute;
        top: -60px;
        width: 679px;
        height: 280.6px;
      }
    }
  }
}

.bottom-circle {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  gap: 12px;

  .circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
  }

  .circle1 {
    background: url(@/assets/images/orange.png) center no-repeat;
    // &::after {
    //   position: absolute;
    //   left: -50%;
    //   top: -50%;
    //   z-index: -2;
    //   content: '';
    //   width: 200%;
    //   height: 200%;
    //   border-radius: 50%;

    //   background-color: #181515;
    //   background-image: conic-gradient(transparent, #66ddf7, transparent 30%);
    //   animation: rotate 5s linear infinite;
    // }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    &::before {
      content: '';
      inset: 2vmin;
      background-color: #03111e;
      border-radius: 4vmin;
      z-index: 5;
      background: url(@/assets/images/orange.png) center no-repeat;
    }
  }

  .circle2 {
    background: url(@/assets/images/green.png) center no-repeat;
    // &::after {
    //   position: absolute;
    //   left: -50%;
    //   top: -50%;
    //   z-index: -2;
    //   content: '';
    //   width: 200%;
    //   height: 200%;
    //   border-radius: 50%;
    //   background-color: #181515;
    //   background-image: conic-gradient(transparent, #66ddf7, transparent 30%);
    //   animation: rotate 5s linear infinite;
    // }

    // @keyframes rotate {
    //   100% {
    //     transform: rotate(360deg);
    //   }
    // }
    &::before {
      content: '';
      inset: 2vmin;
      background: url(@/assets/images/green.png) center no-repeat;
      border-radius: 4vmin;
      z-index: -1;
    }
  }

  .circle3 {
    background: url(@/assets/images/blue.png) center no-repeat;
    // &::after {
    //   position: absolute;
    //   left: -50%;
    //   top: -50%;
    //   z-index: -2;
    //   content: '';
    //   width: 200%;
    //   height: 200%;
    //   border-radius: 50%;

    //   background-color: #181515;
    //   background-image: conic-gradient(transparent, #66ddf7, transparent 30%);
    //   animation: rotate 5s linear infinite;
    // }

    // @keyframes rotate {
    //   100% {
    //     transform: rotate(360deg);
    //   }
    // }
    &::before {
      content: '';
      inset: 2vmin;
      background-color: #03111e;
      border-radius: 4vmin;
      z-index: -1;
    }
  }

  .percent {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: Source Han Sans SC;
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0px;
    text-align: center;
  }

  .item {
    display: flex;
    width: 275px;
    height: 109px;
    opacity: 1;
    border-radius: 19.6px;

    .circle-info {
      position: relative;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 15px 0 14px 5px;

      .circle-title {
        display: block;
        margin-bottom: 14px;
        opacity: 1;
        color: #ffffff;
        font-family: Source Han Sans;
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
      }

      .num-content {
        display: flex;
        justify-content: space-between;
        width: 68px;
        height: 34px;

        .orange-unit {
          display: block;
          color: #ff8400;
          font-size: 20px;
          font-weight: 500;
        }
      }
    }
  }

  .item1 {
    background: linear-gradient(270deg, #ff84007f 0%, #f3861200 100%);
  }

  .item2 {
    background: linear-gradient(270deg, #2bc57084 2%, #65efc800 100%);
  }

  .item3 {
    background: linear-gradient(270deg, #2b80c584 2%, #658aef00 100%);
  }
}

.number {
  display: block;
  color: #ffffff;
  font-family: Source Han Sans;
  font-weight: 800;
  font-size: 34px;
  line-height: 24px;
}

.unit {
  opacity: 1;
  color: rgba(154, 209, 255, 1);
  font-family: Source Han Sans SC;
  font-weight: regular;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  margin-left: 8px;
}

.civ {
  position: relative;
  height: 100%;

  .background {
    z-index: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 196px;
    margin: 0 auto;
    background: url(@/assets/images/background-industry.png) center bottom
      no-repeat;
    background-size: cover;
  }

  .text-info {
    position: absolute;
    opacity: 1;
    font-family: Source Han Sans SC;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0px;
    width: 140px;
    text-align: center;
    margin-left: 42px;
  }

  .danger-info {
    color: rgba(255, 135, 135, 1);
    bottom: 90px;
  }

  .watch-info {
    color: rgba(85, 238, 255, 1);
    line-height: 36px;
    bottom: 77px;
  }

  .chemestry-info {
    color: rgba(255, 195, 54, 1);
    width: 100%;
    margin: 0;
    bottom: 95px;
  }

  .number-content {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 45px;
    width: 100%;
    margin: 0 auto;
  }

  .number-content2 {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 55px;
    width: 100%;
    margin: 0 auto;
  }
}

.important {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 225px;

  .imp-item1 {
    background: url(@/assets/images/danger.png) center no-repeat;
    background-size: cover;
  }

  .imp-item3 {
    background: url(@/assets/images/important.png) center no-repeat;
    background-size: cover;
  }
}

.imp-item {
  position: relative;
  z-index: 2;
  width: 228.2px;
  height: 225px;
}

.imp-item2 {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  background: url(@/assets/images/chemestry_danger.png) center no-repeat;
  background-size: cover;
}

.cookie {
  position: relative;
  width: 695.6px;
  height: 333.6px;
  margin: 0 auto;
  margin-top: 28px;
  background: url(@/assets/images/industry_analyse.png) center no-repeat;
  background-size: cover;

  .rose-canvas {
    position: absolute;
    top: 26px;
    width: 670px;
    height: 250px;
    margin: 0 auto;
  }
}
</style>
